<template>
	<!-- 投资任务管理 -->
	<div class="tenderTaskMngPage">
		<div class="headInfoBox SourceHanSansMedium m-b20">
			待派发的招标任务
			<span class="numBox">数量：{{ state.projectAllTaskList.length }}</span>
		</div>
		<div class="contentBox m-b50">
			<div class="boxStyle leftBox m-r30">
				<div
					v-if="state.projectAllTaskList.length"
					class="left_b_item m-b10 d-flex"
					v-for="(v, i) in state.projectAllTaskList"
					:key="i"
				>
					<div class="index m-r5">
						{{ i + 1 }}
					</div>
					<div class="title_name">
						<div class="name d-flex">
							<div>《{{ v.taskName }}》</div>
						</div>
						<div class="name_2">《{{ v.projectName }}》</div>
					</div>
					<div class="allocation">
						<el-button @click="getAllotUsers(v.projectTaskId)">
							<svg-icon icon-class="project-detail-icon-left_2" class="icon" />
							分配责任人</el-button
						>
					</div>
				</div>
				<el-empty v-else description="暂无数据"></el-empty>
			</div>
			<div class="boxStyle rightBox">
				<div class="statisticsBox">
					<div class="staticsItemBox" v-for="(n, i) in staticsDataArr" :key="i">
						<div class="itemLeftBox">
							<svg-icon :icon-class="n.icon" class="icon" />
						</div>
						<div class="itemRightBox p-l20">
							<div class="numBox SourceHanSansMedium">{{ state[n.num] }}</div>
							<div class="titleBox">{{ n.title }}</div>
						</div>
					</div>
				</div>
				<div class="infoBox m-b20">
					当前部门执行端人数：{{ state.deptUserNum || 0 }}

					<el-radio
						v-model="form.radio"
						:label="1"
						class="m-l20"
						@click.prevent="radioChange('radio', form.radio)"
						>隐藏已离职员工</el-radio
					>
				</div>
				<div class="cardBox" v-if="state.userList.length">
					<el-row :gutter="20">
						<el-col :span="8" v-for="(n, i) in state.userList" :key="i"
							><div
								class="cardItemBox m-b20 cursor"
								:class="n.clickFlag ? 'cardActive' : 'cardDefault'"
								@click="itemClick(i, n)"
							>
								<div class="layerHover" v-if="n.clickFlag">
									<svg-icon
										icon-class="project-detail-icon-hover"
										class="icon"
									/>
								</div>
								<div class="name">
									<svg-icon
										icon-class="project-detail-icon-user"
										class="icon"
									/>
									{{ n.userName }}
								</div>
								<div class="post m-t5">
									<span>岗位:</span>
									{{ n.positionName }}
								</div>
								<div class="post m-t5">
									<span>当前负责项目数:</span>
									{{ n.taskNum }}
								</div>
							</div></el-col
						>
					</el-row>
				</div>
				<el-empty v-else description="暂无数据"></el-empty>
			</div>
		</div>
		<div class="searchBox">
			<el-form :inline="true">
				<el-form-item label="搜索">
					<el-input
						v-model="form.keyword"
						class="searchInput"
						clearable
						placeholder="根据项目名称或编号搜索"
					/>
				</el-form-item>
				<el-form-item label="投资项目类别">
					<el-select
						v-model="form.projectTypeId"
						class="w-140"
						placeholder="请选择"
					>
						<el-option label="股投" value="1"></el-option>
						<el-option label="固投" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="" style="margin-right: 0">
					<el-button
						color="#FF7B50"
						style="color: #fff"
						type="primary"
						@click="getPageList"
					>
						查询
					</el-button>
					<el-button color="#F0F0F0" @click="doReset">重置</el-button>
					<el-divider direction="vertical" class="searchDivider" />
					<div
						class="screen-button d-flex a-center j-center"
						:style="{
							'--screen-button-border-color':
								state.isHideComplete == 1 ? '#fc7037' : '#CCCCCC',
						}"
					>
						<el-radio
							v-model="form.hide"
							:label="1"
							@click.prevent="radioChange('hide', form.hide)"
							>隐藏已完结项目</el-radio
						>
					</div>
				</el-form-item>
			</el-form>
			<!--            <el-button
                    class="f-r m-b20"
                    color="#7D7D9A"
                    style="color: #fff"
                    @click="toPath('查看投资项目台账')"
            >
                <svg-icon icon-class="tender-task-icon-1" class="iconStyle m-r10" />
                查看投资项目台账</el-button
            >-->
		</div>

		<public-table
			index
			:page="page"
			:tableData="tableData"
			:tableOption.sync="tableOption"
			@page-change="onPageChange"
		>
			<template #buttons="scope">
				<el-button @click="toPath('查看详情', scope.row)">查看详情</el-button>
			</template>
		</public-table>

		<public-dialog
			:title="'招标项目任务派发'"
			:width="'30%'"
			v-model:visible="state.visible"
			@onConfirm="onConfirm"
		>
			<div class="public-dialog-content d-flex j-center a-center">
				<span class="m-r10">请选择任务的实施人员</span>
				<el-select v-model="state.allotUserId">
					<el-option
						v-for="(item, index) in state.allotUsers"
						:key="index"
						:value="item.userId"
						:label="item.userName"
					></el-option>
				</el-select>
			</div>
		</public-dialog>
	</div>
</template>

<script setup>
import { onMounted, ref, reactive, watch } from "vue";
import {
	ElForm,
	ElFormItem,
	ElSelect,
	ElOption,
	ElDivider,
	ElRow,
	ElCol,
	ElRadio,
	ElMessage,
	ElEmpty,
} from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import PublicTable from "@/components/PublicTable.vue";
import { biddingTaskApi, processApi } from "@/api/biddingProject";
import PublicDialog from "@/components/PublicDialog.vue";
import {
	competitiveBiddingStatusOptions,
	taskStatusOptions,
} from "@/common/dict/dictCollect";
import { investmentProjects } from "@/api/investment";
import { tableCommonFun } from "@/hooks/tableCommon";

const store = useStore();
const router = useRouter();
const getProjectId = router.currentRoute.value.params.projectId;

const interfaceConfig = reactive({
	fileName: "investment",
	apiPath: "investmentProjects.getProjectAllTaskList",
});

/**
 * 默认参数
 * @type {UnwrapNestedRefs<{prepareStatus: number}>}
 */
const defaultParameters = reactive({
	projectId: getProjectId,
	divide: 1,
	hide: 1,
});

const {
	form,
	page,
	tableOption,
	tableData,
	onQuery,
	onReset,
	onPageChange,
	getData,
	onExport,
} = tableCommonFun(interfaceConfig, {}, defaultParameters);

form.value = {
	keyword: "",
	projectTypeId: "",
	responsibleUserId: "",
	hide: 1,
	radio: 1,
};

tableOption.value = [
	{
		label: "任务状态",
		prop: "status",
		formatter: (val, row) => {
			return ["进行中", "完成"][val] || "未完成";
		},
	},
	{ label: "任务名称", prop: "taskName" },
	{ label: "任务编号", prop: "taskCode" },
	{
		label: "任务类型",
		prop: "taskType",
		formatter: (val, row) => {
			return ["", "招标任务", "投资任务", "租赁任务"][val] || "-";
		},
	},
	{ label: "责任人", prop: "responsibleUserName" },
	{ label: "任务量", prop: "taskNum" },
	{ label: "当前节点", prop: "currentFlowNodeName" },
	{ label: "任务创建时间", prop: "createTime" },
	{ label: "实际完成日期", prop: "realEndTime" },
	{ label: "操作", prop: "buttons", slot: true, width: "400px" },
];

const state = reactive({
	radio: 0, // 0否 1是
	isHideComplete: 1,
	tableData: [{}],
	allotToList: [],
	userList: [],
	planNum: 0,
	allotToNum: 0,
	allotedNum: 0,
	deptUserNum: 0,
	visible: false,
	allotUserId: "",
	allotUsers: [],
	projectTaskList: store.state.common.tenderType,
	projectTaskId: "",
	keywords: "",
	taskStatus: "",
	projectTypeExplain: "",
	tenderTypeExplain: "",
	deptId: "",
	responsibleUserId: "",

	projectAllTaskList: [],
});

/**
 * 重置
 */
const doReset = () => {
	state.userList = state.userList.map((v) => {
		v.clickFlag = false;
		return v;
	});
	onReset();
	form.value.radio = 1;
	form.value.hide = 1;
};

/**
 * 是否隐藏已离职员工/是否隐藏已完结项目
 * @param key
 * @param value
 */
const radioChange = (key, value) => {
	if (value === 1) {
		form.value[key] = 0;
	} else {
		form.value[key] = 1;
	}
	if (key == "isHideComplete") {
		getPageList();
	} else {
		getDeptUserList({ isHide: form.value.radio, projectId: getProjectId });
	}
};

const staticsDataArr = reactive([
	{
		img: "",
		num: "planNum",
		title: "拟计划投资任务数",
		icon: "project-detail-icon-edit",
	},
	{
		img: "",
		num: "allotToNum",
		title: "待分配投资任务数",
		icon: "project-detail-icon-left_",
	},
	{
		img: "",
		num: "allotedNum",
		title: "部门当前实施任务数",
		icon: "project-detail-icon-success_",
	},
]);

/**
 * 根据责任人查列表
 * @param index
 * @param item
 */
const itemClick = (index, item) => {
	form.value.responsibleUserId = item.userId;
	state.userList.map((n, i) => {
		if (n.userId === item.userId && !n.clickFlag) {
			n.clickFlag = true;
		} else {
			n.clickFlag = false;
		}
	});
	if (state.userList.findIndex((v) => v.clickFlag) == -1) {
		form.value.responsibleUserId = "";
	}
	getPageList();
};

/**
 * 获取看板信息
 */
const getBoard = (projectId) => {
	investmentProjects.getBoard(projectId).then((res) => {
		if (res.code == 200) {
			state.planNum = res.data.planNum;
			state.allotToNum = res.data.allotToNum;
			state.allotedNum = res.data.allotedNum;
			state.deptUserNum = res.data.deptUserNum;
		}
	});
};

/**
 * 分配责任人
 */
const onConfirm = () => {
	if (state.allotUserId.trim() === "") {
		ElMessage.warning("请选择实施人员!");
		return;
	}
	tenderTaskAllot({
		responsibleUserId: state.allotUserId,
		projectTaskId: state.projectTaskId,
		projectId: getProjectId,
	});
};

const tenderTaskAllot = (params) => {
	investmentProjects.updateTask(params).then((res) => {
		if (res.code === "200") {
			ElMessage.success("指定实施人员成功!");
			state.visible = false;
			// 未分配
			getProjectAllTaskList({
				pageNum: 1,
				pageSize: 10,
				param: { projectId: getProjectId, divide: 2 },
			});
		}
	});
};

/**
 * 查询列表
 */
const getPageList = () => {
	let params = {
		pageNum: page.current,
		pageSize: page.size,
		param: {
			...form.value,
			projectId: getProjectId,
			divide: 1,
		},
	};
	getData(params);
};

/**
 * 通过项目任务编号获取可以分配的用户列表
 * @param projectTaskId
 */
const getAllotUsers = (projectTaskId) => {
	state.projectTaskId = projectTaskId;
	investmentProjects.getAllotUsers(projectTaskId).then((res) => {
		if (res.code === "200") {
			state.allotUsers = res.data;
			state.visible = true;
		}
	});
};

/**
 * 获取统计部门用户列表
 */
const getDeptUserList = (params) => {
	investmentProjects.getDeptUserList(params).then((res) => {
		if (res.code === "200") {
			state.userList = res.data.map((v, i) => {
				const obj = {
					...v,
					clickFlag: true,
				};
				obj.clickFlag = false;
				return obj;
			});
		}
	});
};

const getTypeList = () => {
	if (store.state.common.tenderType.length === 0) {
		processApi.getTypeList().then((res) => {
			if (res.code == 200) {
				state.projectTaskList = res.data;
				store.commit("set_tenderType", res.data);
			}
		});
	} else {
		state.projectTaskList = store.state.common.tenderType;
	}
};

const toPath = (type, row) => {
	console.log(row);
	switch (type) {
		case "查看详情":
			/*  router.push({
                path: "/tender/taskManage/taskExecuteManageDetail",
                query: {
                    tenderTaskId: row.tenderTaskId,
                },
            });*/
			router.push({
				path: `/investmentProjectManagement/investmentProjects/investmentProjectInformation/task/configureNodes/${row.projectTaskId}/${row.taskName}`,
			});
			break;
		case "查看投资项目台账":
			router.push({
				path: "/tender/ledger/ledgerPage",
			});
			break;
	}
};

/**
 * 项目实施任务列表(管理端)
 * @param params
 */
const getProjectAllTaskList = (params) => {
	investmentProjects.getProjectAllTaskList(params).then((res) => {
		if (res.code === "200") {
			state.projectAllTaskList = res.data.content;
		}
	});
};

onMounted(() => {
	getBoard(getProjectId);
	getDeptUserList({ isHide: form.value.radio, projectId: getProjectId });

	// 已分配
	getData({
		pageNum: 1,
		pageSize: 10,
		param: { projectId: getProjectId, divide: 1, hide: form.value.hide },
	});
	// 未分配
	getProjectAllTaskList({
		pageNum: 1,
		pageSize: 10,
		param: { projectId: getProjectId, divide: 2 },
	});
});
</script>

<style lang="scss" scoped>
.tenderTaskMngPage {
	.w-140 {
		width: 140px;
	}
	.searchDivider {
		height: 40px;
		margin: 0 66px 0 20px;
	}
	.headInfoBox {
		color: #666666;
		.numBox {
			color: var(--el-color-primary);
		}
	}
	.contentBox {
		display: flex;
		.boxStyle {
			flex: 1;
			height: 505px;
			padding: 30px;
			border-radius: 10px;
			border: 1px solid #e3e7f1;
		}
		.leftBox {
			overflow-y: auto;
			.left_b_item {
				justify-content: space-between;
				.index {
					height: 30px;
					line-height: 30px;
				}
				.title_name {
					.name {
						padding: 0 20px;
						justify-content: space-between;
						width: 523px;
						height: 30px;
						border-radius: 10px;
						line-height: 30px;
						border: 1px solid #e3e7f1;
						background-color: #e3e7f1;
						.el-button {
							width: 60px;
							height: 22px;
							background: #7d7d9a;
							border-radius: 2px;
							color: #fff;
							border: 0;
							margin-top: -8px;
						}
					}
					.name_2 {
						padding: 0 20px;
						font-size: 12px;
						font-weight: 400;
						color: #666666;
						line-height: 18px;
					}
				}
				.allocation {
					.el-button {
						width: 113px;
						height: 30px;
						color: #fff;
						background: #fc7018;
						border-radius: 6px;
					}
				}
			}
		}
		.rightBox {
			overflow-y: auto;
			overflow-x: hidden;
			.statisticsBox {
				width: 100%;
				display: flex;
				justify-content: space-around;
				margin-bottom: 24px;
				.staticsItemBox {
					width: 200px;
					height: 52px;
					box-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.03),
						-1px -1px 3px 0px rgba(0, 0, 0, 0.01);
					border-radius: 8px;
					display: flex;
					.itemLeftBox {
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.itemRightBox {
						flex: 3;
						display: flex;
						flex-direction: column;
						.numBox {
							flex: 1;
							color: $title-big-color;
							display: flex;
							align-items: center;
						}
						.titleBox {
							flex: 1;
							display: flex;
							align-items: center;
							font-size: 12px;
							color: #999999;
						}
					}
				}
			}
			.infoBox {
			}
			.cardBox {
				.cardItemBox {
					height: 94px;
					border-radius: 12px;
					padding: 10px;
					.post {
						margin-top: 3px;
						font-size: 14px;
						font-weight: 400;
						color: #1a1a1a;
						line-height: 21px;
						span {
							font-size: 12px;
							font-weight: 400;
							color: #666666;
							line-height: 18px;
						}
					}
				}
				.cardActive {
					position: relative;
					overflow: hidden;
					border: 0.5px solid var(--el-color-primary);
					.layerHover {
						position: absolute;
						width: 30px;
						height: 20px;
						background-color: var(--el-color-primary);
						top: 0;
						right: 0;
						border-radius: 0 0 0 6px;
						.icon {
							position: absolute;
							top: 0%;
							left: 6px;
							width: 17px;
							height: 17px;
							text-align: center;
						}
					}
				}
				.cardDefault {
					position: relative;
					border: 0.5px solid #999999;
				}
			}
		}
	}
	.searchBox {
		.demo-form-inline {
			margin-bottom: 6px;
			.el-form-item {
				.el-form-item__content {
					.searchInput {
						width: 284px;
					}
				}
			}
		}
		.iconStyle {
			width: 20px;
			height: 20px;
		}
	}
}
.post {
	margin-top: 5px;
}
</style>
